<template>
  <div>
    <v-progress-linear v-if="loading" indeterminate ></v-progress-linear>
    <v-app-bar app elevation="0" dense color="white">
      <v-btn icon @click="$router.go(-1)">
        <v-icon>mdi-arrow-left</v-icon>
      </v-btn>
      <v-toolbar-title class="text-center flex-grow-1 subtitle-1">{{appTitle}}</v-toolbar-title>
    </v-app-bar>


    <v-container>
      <div>
        <v-card outlined class="rounded-lg" st>
          <v-card-text>
            <v-row align="center">
              <v-col cols="auto" style="padding-right: 0">
                <v-avatar  size="70">
                  <img style="max-width: 100%; height: auto; display: block;" src="/asset/loan/img/14fa445ed6a406b9.jpg" alt="员工图片">
                </v-avatar>
              </v-col>
              <v-col  style="padding-left: 0">
                <v-row>
                  <v-col cols="7">
                    <v-card-title class="c-h5">营业执照信用贷</v-card-title>
                    <v-card-subtitle class="text-body-1"><span class="c-sh">适合客户</span>：实体经营</v-card-subtitle>
                  </v-col>
                  <!-- 第三列：两个按钮 -->
                  <v-col cols="5">
                    <v-row>
                      <!-- 第三列第一行：按钮1 -->
                      <div class="text-body-1">额度<span class="c-sh-red"> 1-60万  </span></div>
                      <div class="text-body-1" style="font-size: 0.9rem">利息<span style="color: #FB0B0BFF;"> 230元/万元/月 </span></div>
                      <!-- 第三列第二行：按钮2 -->
                      <v-col cols="12">
                        <v-btn color="secondary" block @click="goToNewsDetail()">查看详情</v-btn>
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
        <v-card outlined class="rounded-lg" st>
          <v-card-text>
            <v-row align="center">
              <v-col cols="auto" style="padding-right: 0">
                <v-avatar  size="70">
                  <img style="max-width: 100%; height: auto; display: block;" src="/asset/loan/img/13a7bd6cd2634f25.jpg" alt="员工图片">
                </v-avatar>
              </v-col>
              <v-col  style="padding-left: 0">
                <v-row>
                  <v-col cols="7">
                    <v-card-title class="c-h5">生意贷</v-card-title>
                    <v-card-subtitle class="text-body-1"><span class="c-sh">适合客户</span>：生意贷</v-card-subtitle>
                  </v-col>
                  <!-- 第三列：两个按钮 -->
                  <v-col cols="5">
                    <v-row>
                      <!-- 第三列第一行：按钮1 -->
                      <div class="text-body-1">额度<span class="c-sh-red"> 1-60万  </span></div>
                      <div class="text-body-1" style="font-size: 0.9rem">利息<span style="color: #FB0B0BFF;"> 230元/万元/月 </span></div>
                      <!-- 第三列第二行：按钮2 -->
                      <v-col cols="12">
                        <v-btn color="secondary" block @click="goToNewsDetail()">查看详情</v-btn>
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>

      </div>

    </v-container>

  </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from 'vuex';
import { areaList } from '@vant/area-data';
import { encode, decode } from 'js-base64';

export default {
  data: () => ({
    loading: false,
    items: [],
    pageNo: 1,
    pageSize: 10,
    finished: false,
    cate: '',
    amount_range: '',
    filterSheet: false,
    provinceList: areaList.province_list,
    provinceDialog: false,
    provinceSelected: '',
    cityDialog: false,
    citySelected: ''
  }),
  computed: {
    provinceSelectedName() {
      if (this.provinceSelected == '') return '';

      return this.provinceList[this.provinceSelected] ? this.provinceList[this.provinceSelected] : ''
    },
    citySelectedName() {
      if (this.citySelected == '') return '';

      return areaList.city_list[this.citySelected] ? areaList.city_list[this.citySelected] : ''
    },
    cityList() {
      if(this.provinceSelected.length == 0) return [];

      const list = Object.keys(areaList.city_list).map((code) => ({
        code,
        name: areaList.city_list[code],
      }));

      const code = this.provinceSelected.slice(0, 2);
      return list.filter(
          (item) => item.code.indexOf(code) === 0
      );
    },
    appTitle() {
      if (this.cate == 'general') return '银行综合贷款';
      if (this.cate == 'credit-provident') return '公积金信用贷';
      if (this.cate == 'mortgage-car') return '车辆抵押贷';
      if (this.cate == 'mortgage-house') return '房屋抵押贷';
      if (this.cate == 'mortgage-tax') return '企业税贷';

      return "贷款申请";
    },
    ...mapGetters([
      'uid'
    ]),
  },
  created() {
    this.cate = this.$route.query.cate;
    this.load();
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.reset();
    this.cate = to.query.cate;
    this.amount_range = '';
    this.load();
  },
  methods: {
      goToNewsDetail(id) {
          this.$router.push({ name: 'ChannelsInfo', params: { id } });
      },
    filterData(){
      const that = this;
      that.loading = true;
      axios.get(`/v1/loan_application/checkStatus` ).then((response) => {
        if (response.data.code == 200) {
          this.filterSheet = true
        } else {
          that.$toasted.show(response.data.msg, {type: "error"});
        }
      })
          .catch(function () {})
          .then(function () {
            that.loading = false;
          });
    },
    reset() {
      this.items = [];
      this.pageNo = 1;
      this.finished = false;
    },
    clearAera() {
      this.provinceSelected = '';
      this.citySelected = '';
    },
    filter() {
      this.reset();
      const params = Object.entries({
        pageSize: this.pageSize,
        page: this.pageNo,
        province: encode(this.provinceSelectedName),
        city: encode(this.citySelectedName),
        amount_range: this.amount_range
      }).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {});
      localStorage.setItem('savedFilters', JSON.stringify(params));
      this.load();
      this.filterSheet = false;
    },
    load() {
      let params = null;
      const savedFilters = localStorage.getItem('savedFilters');
      if (savedFilters) {
        params = JSON.parse(savedFilters);
      }else {
        params = Object.entries({
          pageSize: this.pageSize,
          page: this.pageNo,
          province: encode(this.provinceSelectedName),
          city: encode(this.citySelectedName),
          amount_range: this.amount_range
        }).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {});
      }
      if(this.cate){
        params.category = this.cate
      }
      const that = this;
      that.loading = true;
      axios.get(`/v1/loan`,{ params: params} ).then((response) => {
        if (response.data.code == 0) {
          that.items = that.items.concat(response.data.data.items);
          if (response.data.data.items.length < that.pageSize) {
            that.finished = true;
          }
        } else {
          that.$toasted.show(response.data.msg, {type: "error"});
        }
      })
          .catch(function () {})
          .then(function () {
            that.loading = false;
          });
    },
    loadMore() {
      this.pageNo++;
      this.load();
    },
  }
};
</script>

<style lang="scss">
.c-h5{
  color: #0B0A0AFF;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
}
.c-sh-red{
  font-size: 1.1rem !important;
  color: #FB0B0BFF;
}
.c-sh{
  font-size: 0.8rem !important;
  color: #cacaca;
}
.filter-active {
  background-color: #F5DEE1;
}

.province-city {
  top:0;
  left:0;
  right:0;
  z-index: 1;

  .v-toolbar__content {
    z-index: 1;
  }
}


</style>

